<template>
  <div class="zx-cardL">
    <div class="cardL-container">
      <div class="cardL-bg">
        <div class="caption">
          <h4>{{title}}</h4>
          <div class="cardL-label" :class="cardDefault?'':'no-data'">{{cardDefault}}</div>
        </div>
        <span class="cardType">储蓄卡(工资卡)</span>
        <p class="balance">678.00<span>元</span></p>
        <div class="card-detail">
          <div class="type">
            <!--<span v-html="currency+ (currency!=''&&accountType!=''?' | ':'')+ accountType"></span>-->
            <p>{{currency}}</p>
            <p v-if="currency!=''&&accountType!=''" class="border"></p>
            <p>{{accountType}}</p>
          </div>
          <div class="card-No">1111 **** 1111</div>
        </div>
      </div>
      <div class="cardL-buttons">
        <p>活期转定期</p>
        <p class="border"></p>
        <p><span></span>详情</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'zxButton',
  props: {
    cardDefault: {
      type: String, // 默认卡
      default: '默认卡'
    },
    cardLNo: { // 卡号
      type: String,
      default: '1234 **** 1234'
    },
    currency: { // 货币类型
      type: String,
      default: '人民币'
    },
    accountType: { // 账户类型
      type: String,
      default: 'I类户'
    },
    title: { // 卡标题
      type: String,
      default: '两地一本通'
    }
  },
  data () {
    return {
      nowCur: 0,
      butTypea: 'primary',
      butTypeB: 'default'
    }
  },
  methods: {
  },
  mounted: function () { }
}
</script>
<style lang="less">
  .zx-cardL {
    width: 100%;
    padding: .16rem .32rem;
    background-color: #f0f0f0;
    .cardL-container{
      width: 6.78rem;
      margin: 0 auto;
      background-color: #fff;
      border-radius: .26rem;
      overflow: hidden;
      .cardL-bg {
        width: 100%;
        padding: .26rem .32rem;
        background-image: url("../../../static/img/cardBgl.png");
        -webkit-background-size: 100% auto;
        background-size: 100% 100%;
        color: #fff;
        .caption {
          display: flex;
          justify-content:space-between;
          align-items: center;
          font-size: 0.32rem;
          h4 {
            height: .28rem;
            line-height: .28rem;
          }
          .cardL-label {
            height: .38rem;
            font-size: .2rem;
            line-height: .38rem;
            padding: .01rem .06rem;
            border: .02rem solid #fff;
            border-radius: .08rem;
            &.no-data {
              border: none;
            }
          }
        }
        .cardType {
          margin-top: .1rem;
          height: .28rem;
          line-height: .28rem;
          font-size: .2rem;
        }
        .balance {
          margin:.04rem 0 .24rem;
          height: .8rem;
          line-height: .8rem;
          font-size: .68rem;
          span {
            font-size: .24rem;
          }
        }
        .card-detail {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .type {
            display: flex;
            height: .28rem;
            line-height: .28rem;
            align-items: center;
            font-size: .24rem;
            vertical-align: middle;
            .border {
              position: relative;
              top: -.01rem;
              height: .26rem;
              margin: 0 .16rem;
              border-right: .02rem solid #fff;
            }
          }
          .card-No {
            font-size: .32rem;
          }
        }
      }
      .cardL-buttons {
        width: 100%;
        height: .76rem;
        display: flex;
        align-items: center;
        p {
          width: 49.9%;
          height: 100%;
          text-align: center;
          line-height: .76rem;;
          font-size: .32rem;
        }
        .border {
          width: .2%;
          height: .26rem;
          border-left: .02rem solid #CDCED3;
        }
      }
    }
  }
</style>
